<template>
  <div>
    <!-- <Music />
    <Play />
    <Work /> -->
    <button @click="comount = 'Music'">Music</button>
    <button @click="comount = 'Play'">Play</button>
    <button @click="comount = 'Work'">Work</button>
    <!-- vue中提供了一种不需要刷新页面就可以更换页面组件的一种方式---component -->
    <!-- component中存在一个v-bind属性,其中是一个已经被注册的组件字符串 -->
    <!-- 通过修改该字符串配置就可以实现组件间的跳转 -->
    <keep-alive include="Play,Work,Music">
      <!-- 使用keep-alive 使得组件缓存-->
      <!-- 
        keep-aclive的配置项, keepalive允许对加载组件是否进行存储进行限制
          - include :哪个组件允许缓存 其值可以为一个字符串,多个数据使用","隔开,或者使用数组,或者正则表示
          - exclude :与include相反,其表示不允许哪个组件缓存,但是参数一致
            - 如果exclude和include都写,那么exclude优先
        但是使用keep-active后出现一种现象,所有的被缓存的页面都不再有生命周期,因为其不会被挂载和卸载
        于是,vue刚给启用了keep - active的组件添加了两个特殊的生命周期 
          - activated -- 激活 与 deactivated -- 失活 ,这两个周期只在keep-alive包含的组件中使用
       -->
      <component :is="comount"> </component>
    </keep-alive>

    <!-- 通过给每个组件添加生命周期发现,当页面每次切换时,组件都会从新卸载,挂载,这种情况是非常浪费资源对于频繁切换来讲 -->
    <!-- 所以vue中提供了一种方式,将其加载一次后的组件都存放在缓存中,等待下次使用---keep-alive -->
  </div>
</template>

<script>
// vue路由的实现原理-----动态组件
// vue的路由实现原理就是动态组件,所以其也可以使用动态路由中keep-alive以及其的配置项目
import Music from './Music'
import Play from './Play'
import Work from './Work'
export default {
  components: {
    Music,
    Play,
    Work,
  },
  data() {
    return {
      comount: 'Music',
    }
  },
}
</script>

<style></style>
